<template>
    <div class="sub-info">
        <div class="sub-info-title">
            <div>
                <span>语言能力</span>
                <span @click="addAction" class="add-style" v-if="id != -1 && id">+</span>
            </div>


            <div>
                <el-button
                        :disabled="id == -1 || !id"
                        @click="deleteAction"
                        plain
                        class="delete-btn">删除
                </el-button>
                <el-button
                        :disabled="id == -1 || !id"
                        type="primary"
                        @click="handleClick(edit)">
                    {{edit ? '保存' : '编辑'}}
                </el-button>
            </div>
        </div>
        <el-form
                :rules="rules"
                label-position="left"
                ref="form"
                :model="form"
                label-width="80px"
                class="resume-form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="语言" prop="language">
                        <el-select
                                @change="function(val){selectChange(val,'language')}"
                                v-model="form.language"
                                placeholder="请选择语言"
                                :disabled="!edit"
                                clearable>
                            <el-option
                                    v-if="selectItems.languageList && selectItems.languageList.length"
                                    v-for="(v,i) in selectItems.languageList"
                                    :label="v.name"
                                    :value="v.val"
                                    :key="i"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="熟练程度" prop="proficiency">
                        <el-select
                                @change="function(val){selectChange(val,'proficiency')}"
                                v-model="form.proficiency"
                                placeholder="请选择熟练程度"
                                :disabled="!edit"
                                clearable>
                            <el-option
                                    v-if="selectItems.languageProficiencyList && selectItems.languageProficiencyList.length"
                                    v-for="(v,i) in selectItems.languageProficiencyList"
                                    :label="v.name"
                                    :value="v.val"
                                    :key="i"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        components: {

        },
        props: ['langForms','index','selectItems','id'],
        data() {
            return {
                toDay: false,
                edit: false,
                options:[],
                form: {
                    birthDay: ''
                },
                rules: {
                    language: [
                        { required: true, message: '请选择语言', trigger: 'blur' }
                    ],
                    proficiency: [
                        { required: true, message: '请选择熟练程度', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            selectChange(val,name) {
                if(val) {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === name){
                            i.clearValidate()
                        }
                    })
                }
            },
            handleClick(edit) {
                if(edit) {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let temp = JSON.parse(JSON.stringify(this.form));
                            this.id ? temp.resumeId = this.id : '';
                            this.$emit('updateResume',temp,3,this.index)
                            this.edit = !this.edit;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else {
                    this.edit = !this.edit;
                }

            },
            addAction() {
                this.$emit('addItem',this.index,3)
            },
            deleteAction() {
                this.$emit('deleteItem',this.index,3,this.form);
            }
        },
        watch: {
            'langForms.length': {
                handler(newValue, oldValue) {
                    this.form = this.langForms[this.index];
                }
            },
            langForms: {
                handler(newName, oldName) {
                    console.log(this.langForms,newName);
                    
                    this.form = newName[this.index];
                    console.log(this.form);
                    
                },
                immediate: true
            },
        },
        created() {
            this.form = this.langForms[this.index];
        }
    };
</script>
<style lang="css" scoped>
    .sub-info {
        background: #ffffff;
    }
    .sub-info-title {
        display: flex;
        justify-content: space-between;
        padding: 0 44px;
        background: #ffffff;
        height: 62px;
        align-items: center;
    }
    .sub-info-title div {
        width: 160px;
        display: flex;
    }
    .sub-info-title span:first-child:after {
        width: 28px;
        height: 2px;
        background: #1893FC;
        content: "";
        display: block;
        margin-top: 3px;
    }
    .sub-info-title .el-button {
        padding: 0;
        width:94px;
        height:24px;
        line-height: 24px;
        box-sizing: border-box;
        background: #1893FC;
    }
    .sub-info-title .delete-btn {
        background: #ffffff;
        border-color: #1893FC;
        color: #1893FC;
    }
    .resume-form {
        padding: 0 58px;
    }
    .el-row>.el-col-12:last-child {
        display: flex;
        justify-content: flex-end;
    }
    .bar {
        padding-left: 10px;
    }
    .add-style {
        color: #ffffff;
        width: 13px;
        height: 13px;
        background: #1893FC;
        text-align: center;
        line-height: 13px;
        border-radius: 50%;
        margin-left: 14px;
        margin-top: 5px;
        cursor: pointer;
    }
</style>
